<template>
  <div class="enroll">
    <van-cell-group title="身份信息">
      <van-field
        :value="formData.realname"
        title-width="auto"
        input-align="right"
        clearable
        label="姓名"
        icon="question-o"
        placeholder="请输入姓名"
        bind:click-icon="onClickIcon"
      />

      <multi-picker
        label="国家/地区"
        :show-level="1"
        split-char="-"
        :data="multiArray"
        default-active="安提瓜和巴布达"
        @change="onChecked"
      />

      <single-picker
        label="证件类型"
        :value="formData.idc_type"
        :data="options.idcardtypes"
        placeholder="请选择证件类型"
        @change="onCheckedIct"
      />

      <van-field
        :value="formData.idcardno"
        title-width="auto"
        input-align="right"
        type="idcard"
        label="证件号码"
        maxlength="18"
        placeholder="请输入证件号码"
      />
    </van-cell-group>

    <van-cell-group title="个人信息">
      <single-picker
        label="性别"
        :value="formData.gender"
        :data="options.genders"
        placeholder="请选择性别"
        @change="onCheckedGender"
      />

      <date-picker
        label="出生日期"
        :start="formatAgeDate(age.max)"
        :end="formatAgeDate(age.min)"
        :value="formData.birthday"
        placeholder="请选择出生日期"
        @change="onCheckBirthday"
      />

      <single-picker
        label="民族"
        :value="formData.nation"
        :data="options.nations"
        placeholder="请选择民族"
        @change="onCheckedNation"
      />

      <single-picker
        label="血型"
        :value="formData.blood_type"
        :data="options.bloodtypes"
        placeholder="请选择血型"
        @change="onCheckedBlood"
      />

      <single-picker
        label="教育程度"
        :value="formData.education"
        :data="options.educations"
        placeholder="请选择教育程度"
        @change="onCheckedEducation"
      />
    </van-cell-group>
    <van-cell-group title="联系信息">
      <van-field
        :value="formData.mobile"
        title-width="auto"
        input-align="right"
        label="手机号"
        type="number"
        placeholder="请输入手机号"
        id="mobile"
        @change="onChangeInput"
      />
      <van-field
        :value="formData.email"
        title-width="auto"
        input-align="right"
        label="邮箱"
        placeholder="请输入邮箱"
        id="email"
        @change="onChangeInput"
      />
      <map-cell
        :value="formData.address.address"
        label="所在地"
        placeholder="请选择地区"
        @change="onCheckedDist"
      />
      <van-field
        :value="formData.address_detail"
        title-width="auto"
        input-align="right"
        label="详细地址"
        placeholder="请输入详细地址"
        id="address_detail"
        @change="onChangeInput"
      />
    </van-cell-group>
    <van-cell-group title="紧急联系人信息">
      <van-field
        :value="formData.linkman.name"
        title-width="auto"
        input-align="right"
        clearable
        label="姓名"
        icon="question-o"
        placeholder="请输入紧急联系人姓名"
        bind:click-icon="onClickIcon"
      />
      <van-field
        :value="formData.linkman.mobile"
        title-width="auto"
        input-align="right"
        label="手机号"
        type="number"
        placeholder="请输入紧急联系人手机号"
      />
    </van-cell-group>

    <van-popup
      :show="popup.birthday"
      round
      position="bottom"
      :overlay="true"
    >
      <van-datetime-picker
        type="date"
        title="出生日期"
        :value="currentDate"
        :min-date="minDate"
        :max-date="maxDate"
        @input="onInputDate"
        @cancel="popup.birthday = false"
        @confirm="onConfirmBirthday"
      />
    </van-popup>

    <van-popup
      :show="popup.country"
      round
      position="bottom"
      :overlay="true"
    >
      <van-picker
        show-toolbar
        title="国家/地区"
        :item-height="50"
        :visible-item-count="8"
        :columns="countrys"
        @change="onChangeCountry"
        @cancel="popup.country = false"
        @confirm="onConfirmCountry"
      />
    </van-popup>

  </div>
</template>

<script>
import navbar from '@/components/navbar'
import card from '@/components/card'
import { formatDate } from '@/utils/index'
import options from '@/utils/options'
import dist from '@/utils/countries'
import MultiPicker from '@/components/form/multiPicker'
import DatePicker from '@/components/form/datePicker'
import SinglePicker from '@/components/form/singlePicker'
import MapCell from '@/components/form/mapCell'
export default {
  components: {
    navbar,
    card,
    MultiPicker,
    SinglePicker,
    DatePicker,
    MapCell
  },

  data () {
    return {
      popup: {
        country: false,
        nation: false,
        birthday: false,
        blood: false,
        clothsize: false
      },
      multiArray: dist,
      countrys: [],
      age: {
        min: 16,
        max: 65
      },
      options: options,
      id: 0,
      minHour: 10,
      maxHour: 20,
      minDate: new Date().getTime(),
      maxDate: new Date(2019, 10, 1).getTime(),
      currentDate: new Date().getTime(),

      formData: {
        realname: '',
        mobile: '',
        email: '',
        idc_type: '',
        idcardno: '',
        birthday: '',
        gender: '',
        blood_type: '',
        country: '',
        nation: '',
        education: '',
        address_detail: '',
        address: {
          nation: '',
          province: '',
          city: '',
          district: '',
          address_detail: '',
          nation_code: '',
          area_code: '',
          lat: 0,
          lng: 0,
          address: ''
        },
        linkman: {
          name: '',
          mobile: ''
        },
        cloth_size: '',
        extras: {}
      },
      title: '导航栏',
      titleColor: '#000000',
      value: ''
    }
  },
  onLoad (option) {
    this.id = option.id
    console.log(option)
    console.log('小程序 [page-blog] 生命周期: onLoad: 监听页面加载')
  },
  // 跳转后页面
  mounted () {
    console.log(this.id)
    let continent = Object.keys(dist)
    this.countrys = [
      {
        values: continent,
        className: 'continent'
      },
      {
        values: dist[continent[0]],
        className: 'country',
        defaultIndex: 3
      }
    ]
  },
  watch: {
    currentDate (value) {
      this.formData.birthday = formatDate(value)
    },
    formData: {
      handler (now, old) {
        console.log('当前表单数据', now)
      },
      deep: true,
      immediate: true
    }
  },
  created () {
    console.log('test')
  },
  methods: {
    onChecked (data) {
      let country = data.pop()
      this.formData.country = country.data
    },
    onChangeInput (e) {
      console.log(e)
      let id = e.mp.target.id
      let ids = id.split('.')
      console.log(ids)
      let key = ids.pop()

      let obj = this.formData
      for (let i = 0; i < ids.length; i++) {
        obj = obj[ids[i]]
      }
      this.$set(obj, key, e.mp.detail)
    },
    onCheckedDist (data) {
      console.log('选取地点的数据', data)
      this.$set(this.formData.address, 'address_detail', '')
      this.$set(
        this.formData,
        'address',
        Object.assign({}, this.formData.address, data)
      )
      // this.$refs.addressDetail.focus = true
      this.$set(this.formData, 'address_detail', data.address_detail)
      // this.formData.address = Object.assign({}, this.formData.address, data)
    },
    onCheckBirthday (date) {
      this.formData.birthday = date
    },
    onCheckedNation (data) {
      console.log('选择的民族', data)
      this.formData.nation = data
    },
    onCheckedBlood (data) {
      console.log('选择的血型', data)
      this.formData.blood_type = data
    },
    onCheckedIct (data) {
      console.log('选择的证件类型', data)
      this.formData.idc_type = data
    },
    onCheckedEducation (data) {
      console.log('选择的血型', data)
      this.formData.education = data
    },
    onCheckedGender (data) {
      console.log('选择的血型', data)
      this.formData.gender = data
    },
    formatAgeDate (age) {
      let now = new Date()
      let year = now.getFullYear() - age
      now.setFullYear(year)
      let date = formatDate(now)
      console.log(date)
      return date
    },
    showPopupDate () {
      this.show = true
    },
    closePopupDate () {
      this.show = false
    },
    onConfirmBirthday (event) {
      this.currentDate = event.mp.detail
      this.popup.birthday = false
    },
    onConfirmCountry (event) {
      const { value } = event.target
      this.formData.country = value[1]
      this.countrys[1].values = dist[value[0]]
      this.popup.country = false
    },
    onChangeCountry (event) {
      const { picker, value } = event.target
      picker.setColumnValues(1, dist[value[0]])
    },
    onSuccess: function (res) {
      console.log(res.detail)
    },
    onFail: function (res) {
      console.log(res)
    }
  }
}
</script>

<style lang="less">
.search-warp {
  text-align: center;
  margin-top: 100px;
}
.enroll {
  background: #f1f2f3;
  .van-cell {
    padding: 15px !important;
    &-group {
      &__title {
        padding: 20px 15px 10px !important;
      }
    }
  }
}
</style>
